<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>javascript 阶段</title>
    <style>
        h3 {
            height: 100px;
            line-height: 100px;
            background-color: #ccc;
        }
    </style>
</head>
<body>

    <script>
        // 要求：
            // 广东
                // 广州 深圳 佛山 茂名
            // 江西
                // 九江 新余 上饶 
            // 广西
                // 桂林 南宁 百色
            // 浙江
                // 温州 杭州 义乌
        // 数据：
        var data = [
            {pro: "广东",city: "广州,深圳,佛山,茂名"},
            {pro: "江西",city: "九江,新余,上饶"},
            {pro: "广西",city: "桂林,南宁,百色"},
            {pro: "浙江",city: "温州,杭州,义乌"}
        ]
        // 提问：
            // 如何取出'广西' 对应的城市数据 ?
            // var txt = data[2].city;// 
            // console.log(txt);// 桂林,南宁,百色

            // {pro: "广东",city: "广州,深圳,佛山,茂名"}, 用data[0] 来表示
            // 广东                                      用data[0].pro 来表示
            // 广州,深圳,佛山,茂名                        用data[0].city 来表示
        
        // 根据省份，获取相应省份的城市列表
        // 定义变量，记录省市的数据 (数组，对象)

        // 思考：   
            // 定义变量，记录弹窗输入的值，例如，广东
            // 在页面输出广东对应的城市，例如， "广州,深圳,佛山,茂名"

        // 编码：
            // 记录输入的值
            var v1 =  prompt("请输入省份");
            // console.log(v1);
            // 循环4次 ，索引值从0开始 ,    
            // 0,1,2,3
            for(var i = 0 ; i < 4 ; i ++){
                // 判断一下
                if(v1 == data[i].pro){
                    // 渲染城市列表数据
                    document.write("<h3>" +data[i].city+ "</h3>");
                    // 跳出循环
                    break;
                }
            }






    </script>
</body>
</html>